<template>
  <div>
    <div
      class="nav-top"
      :style="{ 'background-image': 'url(' + bgData.img_id + ')' }"
    >
      <div>
        <img
          class="icon-back"
          src="../../../static/images/task/back_white.png"
          @click="$back()"
          alt
        />
        <img
          v-show="0"
          class="icon-share"
          src="../../../static/images/task/share.png"
          alt
        />
      </div>
    </div>
    <div class="main-task">
      <div>
        <div>
          <div class="user-play">
            <img
              :src="
                bgData.pic_id
                  ? bgData.pic_id
                  : '../../../static/images/task/user.png'
              "
              alt
            />
            <span>{{ bgData.name }}</span>
            <button>请求任务</button>
          </div>
          <p class="introduction">
            <span>#初见</span>
            {{ bgData.introduced }}
          </p>
        </div>
      </div>
      <div>
        <div class="time-info">
          <p>
            时间
            <span class="icon-label"></span>
          </p>
          <div class>
            <span>开始时间</span>
            <input type="text" :value="bgData.addtime" readonly />
          </div>
          <div>
            <span>结束时间</span>
            <input type="text" :value="bgData.exittime" readonly />
          </div>
        </div>
      </div>
      <div>
        <div class="detail-info">
          <p>
            详情
            <span class="icon-label"></span>
          </p>
          <div>
            <span>地点</span>
            <input type="text" :value="bgData.detailed_address" readonly />
          </div>
          <div>
            <span>任务发起人性别</span>
            <input type="text" :value="bgData.sex" readonly />
          </div>
          <div>
            <span>约会发起人性别</span>
            <input type="text" :value="bgData.demandsex" readonly />
          </div>
          <div>
            <span>所需人数</span>
            <input type="text" :value="bgData.demand_people + '人'" readonly />
          </div>
          <div class="other-tips">
            <p>其他需求</p>
            <textarea name disabled :value="bgData.content"></textarea>
          </div>
        </div>
      </div>
      <div class="comment-box">
        <div class="comment-info">
          <p>
            她的评价
            <span class="icon-edit"></span>
          </p>
          <div
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="busy"
            infinite-scroll-distance="0"
          >
            <div
              class="comment-item"
              v-for="evaluate in evaluates"
              :key="evaluate.id"
            >
              <div class="user-card">
                <img
                  :src="
                    evaluate.pic_id
                      ? $photo + evaluate.pic_id
                      : '../../../static/images/task/user.png'
                  "
                  alt
                />
                <div>
                  <p>{{ evaluate.name }}</p>
                  <p>{{ evaluate.create_time }}</p>
                </div>
                <div class="star-num">
                  <span class="icon-select-star"></span>
                  <span class="icon-select-star"></span>
                  <span class="icon-select-star"></span>
                  <span class="icon-star"></span>
                  <span class="icon-star"></span>
                </div>
              </div>
              <div class="comment-content">{{ evaluate.content }}</div>
            </div>
          </div>
          <div class="text" v-if="dataStart">没有更多数据了~</div>
        </div>
      </div>
    </div>
    <div class="request">
      <button>
        <a style="color:#fff" :href="`tel:${bgData.phone}`"
          >联系对方：{{ bgData.phone }}</a
        >
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      taskId: null,
      evaluates: [],
      bgData: [],
      page: 1,
      busy: false,
      dataStart: false,
      count: 0
    }
  },
  methods: {
    getBgData() {
      this.$axios({
        method: 'POST',
        url: 'Needloginaction/myTaskDetails',
        data: {
          id: this.taskId,
          token: sessionStorage.token
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            this.bgData = res['data']['data']
          } else {
            alert(res.data.msg)
          }
        })
        .catch(error => {
          alert('网络错误，请刷新后重试~')
        })
    },
    /** 评论数据 */
    loadMore() {
      this.busy = true
      if (this.page == 1) {
        this.comment()
      } else if (this.evaluates.length != this.count) {
        this.comment()
      } else {
        this.dataStart = !this.dataStart
        return false
      }
    },
    comment() {
      this.$axios({
        method: 'POST',
        url: 'Flink/information_comment',
        data: {
          id: this.taskId,
          type: 0,
          page: this.page
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            if (res.data.data.length == 0) {
              this.dataStart = !this.dataStart
              return false
            } else {
              this.count = res.data.count
              if (this.page == 1) {
                this.evaluates = res.data.data
              } else {
                res.data.data.forEach(item => {
                  this.evaluates.push(item)
                })
              }
              this.page++
            }
          } else {
            alert(res.data.msg)
          }
        })
        .catch(error => {
          alert('网络错误，请刷新后重试~')
        })
    }
  },
  created() {
    let id = this.$route.query.id
    this.taskId = id
    this.getBgData()
  }
}
</script>

<style scoped>
.text {
  font-size: 16px;
  text-align: center;
  height: 50px;
  line-height: 50px;
}

.nav-top {
  width: 100%;
  height: 8.667rem;
  padding: 0.667rem 0.267rem;
  box-sizing: border-box;
  background: url('../../../static/images/task/task-top.png') no-repeat;
  background-size: 100% 100%;
}
.nav-top > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icon-back {
  width: 0.33rem;
  height: 0.56rem;
}
.icon-share {
  width: 0.533rem;
  height: 0.533rem;
}
.main-task {
  margin: 0.2rem auto;
}
.main-task > div {
  border-bottom: 4px solid #efefef;
}
.main-task > div > div {
  width: 90%;
  margin: 0.2rem auto;
}
.user-play {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.44rem;
  color: #303030;
}
.user-play img {
  width: 1.2rem;
  height: 1.2rem;
}
.user-play > button {
  width: 2.133rem;
  height: 0.533rem;
  margin-left: 3rem;
  color: #fff;
  font-size: 0.36rem;
  border-radius: 0.267rem;
  border: #343434;
  background-color: #343434;
}
.introduction {
  margin: 0.55rem 0;
  font-size: 0.4rem;
  color: #303030;
}
.introduction > span {
  color: #343434;
  padding-right: 0.3rem;
}
.time-info > p {
  padding: 0.533rem 0 0.267rem 0;
  font-size: 0.44rem;
  color: #343434;
  border-bottom: 1px solid #efefef;
}
.time-info > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.267rem 0 0.4rem 0;
  font-size: 0.4rem;
}
.time-info > div:nth-child(2) {
  border-bottom: 1px solid #efefef;
}
.time-info > div input {
  text-align: right;
  border: none;
  background: none;
  color: #888;
}
.detail-info > p {
  padding: 0.267rem 0;
  font-size: 0.44rem;
  color: #343434;
}
.detail-info > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  font-size: 0.4rem;
  color: #303030;
  border-bottom: 1px solid #efefef;
}
.detail-info > div > input {
  text-align: right;
  color: #888;
  background: none;
  border: none;
}
.other-tips {
  flex-direction: column;
  align-items: normal !important;
  text-align: left;
  border-bottom: 0 !important;
}
.other-tips > textarea {
  width: 100%;
  height: 2.667rem;
  padding: 0.3rem;
  margin: 0.133rem 0;
  border: #e0e0e0;
  border-radius: 0.133rem;
  box-sizing: border-box;
  background-color: #e0e0e0;
}
.comment-box {
  border-bottom: 0 !important;
}
.comment-info {
  font-size: 0.427rem;
}
.comment-info > p {
  padding: 0.267rem 0;
  font-size: 0.44rem;
  color: #343434;
}
.user-card {
  display: flex;
  margin: 0.267rem 0;
}
.user-card > img {
  width: 1.2rem;
  height: 1.2rem;
  padding-right: 0.267rem;
}
.user-card > div > p:nth-child(2) {
  font-size: 0.333rem;
  color: #888;
}
.star-num {
  margin-left: 3rem;
}
.comment-content {
  margin: 0.267rem 0;
}
.request {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.267rem 0;
  box-shadow: 0px -1px 10px #e0e0e0;
}
.request > button {
  width: 90%;
  height: 0.8rem;
  color: #fff;
  font-size: 0.427rem;
  border-radius: 0.4rem;
  border: #343434;
  background-color: #343434;
}
.icon-star {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  background: url('../../../static/images/task/star.png') no-repeat;
  background-size: 100% 100%;
}
.icon-select-star {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  background: url('../../../static/images/task/star_selecct.png') no-repeat;
  background-size: 100% 100%;
}
.icon-label {
  display: inline-block;
  width: 0.36rem;
  height: 0.36rem;
  margin-left: 0.133rem;
  background: url('../../../static/images/task/tag.png') no-repeat;
  background-size: 100% 100%;
}
.icon-edit {
  display: inline-block;
  width: 0.32rem;
  height: 0.293rem;
  margin-left: 0.133rem;
  background: url('../../../static/images/task/fabu.png') no-repeat;
  background-size: 100% 100%;
}
</style>
